<template>
    <div class="icons">
        <swiper :options="swiperOptin">
            <swiper-slide v-for="(page, index) of pages" :key="index">
                <div class="icon-wrapper"  v-for="icon of page" :key="icon.id">
                    <div class="icon-img">
                        <img :src="icon.imgUrl">
                    </div>
                    <span class="icon-desc">{{ icon.desc }}</span>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
export default {
    name: 'HomeIcons',
    props: {
        iconList: Array
    },
    data() {
        return {
            swiperOptin: {
                autoplay: false
            }
        }
    },
    computed: {
        pages() {
            const pages = []
            this.iconList.forEach((item, i) => {
                const page = Math.floor(i / 8)
                if (!pages[[page]]) {
                    pages[page] = []
                }
                pages[page].push(item)
            })
            return pages
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '~styles/varibles.scss';
    @import '~styles/mixin.scss';
    .icons /deep/ .swiper-container{
        height: 0;
        padding-bottom: 50%;
    }
    .icons{
        margin-top: 0.1rem;
        .icon-wrapper{
            position: relative;
            overflow: hidden;
            float: left;
            width: 25%;
            height: 0;
            padding-bottom: 25%;
            .icon-img{
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0.44rem;
                box-sizing: border-box;
                padding: 0.1rem;
                img{
                    display: block;
                    margin: 0 auto;
                    height: 100%;
                }
            }
            .icon-desc{
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 0.44rem;
                line-height: 0.44rem;
                color: $darkTextColor;
                text-align: center;
                @include ellipsis()
            }
        }
    }
</style>
